<template>
  <div className="common-goods">
    <div
      v-for="(item, index) in data"
      :key="item.id"
      :style="{
        width: `calc(100% / ${cols})`,
        paddingTop: index < cols ? 0 : Taro.pxTransform(gap / 2),
        paddingBottom:
          index < Math.floor(data.length / cols) * cols
            ? Taro.pxTransform(gap / 2)
            : 0,
        paddingLeft: index % cols === 0 ? 0 : Taro.pxTransform(gap / 2),
        paddingRight: (index + 1) % cols === 0 ? 0 : Taro.pxTransform(gap / 2),
      }"
      className="common-goods__wrapped"
    >
      <div className="common-goods__item">
        <div class="common-goods__item-wrapped">
          <image :src="item.image" className="common-goods__item-icon" />
        </div>
        <div className="common-goods__item-detail">
          <div className="common-goods__item-name">
            {{ item.name }}
          </div>

          <div className="common-goods__item-info">
            <div className="jifen-group">
              <image
                src="@/assets/jifen/icon-jifen-small.png"
                className="icon-jifen"
              />
              <span className="common-goods__item-jifen">
                {{ item.price }}<label>积分</label>
              </span>
            </div>

            <div className="common-goods__item-exchange">
              <span className="has-exchange">
                {{ item.exchangeCount }}人已兑
              </span>
              <span className="exchange-btn" @tap="onExchange(item.id)"
                >兑换</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IRecommendGoodsItem } from "@/apis/types/jifen";
import Taro from "@tarojs/taro";

defineOptions({
  name: "common-goods",
});

withDefaults(
  defineProps<{
    cols?: number;
    gap?: number;
    data: IRecommendGoodsItem[];
  }>(),
  {
    cols: 2,
    gap: 16,
    data: () => [],
  }
);

const emits = defineEmits(["exchange"]);

const onExchange = (id: number) => {
  emits("exchange", id);
};
</script>

<style lang="less">
.common-goods {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &__wrapped {
    box-sizing: border-box;
  }
  &__item {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0 40px 0 rgba(233, 233, 233, 0.1),
      0 0 40px 0 rgba(125, 125, 125, 0.1);
    border-radius: 20px;
    &-wrapped {
      padding-top: 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-icon {
      width: 90%;
      height: auto;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
    }
    &-detail {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }
    &-name {
      font-weight: 400;
      font-size: 28px;
      color: #000000;
      line-height: 32px;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 限制在这个元素显示的文本的行数为2行 */
      line-clamp: 2;
      overflow: hidden; /* 隐藏超出部分 */
    }
    &-info {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .jifen-group {
      display: flex;
      align-items: center;
      gap: 4px;
      .icon-jifen {
        width: 42px;
        height: 38px;
      }
    }
    &-jifen {
      font-family: AvenirNextCondensed, AvenirNextCondensed;
      display: inline-block;
      vertical-align: baseline;
      font-weight: 600;
      font-size: 32px;
      color: #f98833;
      line-height: 32px;
      label {
        margin-left: 4px;
        font-weight: 400;
        font-size: 24px;
        color: #8b8b8b;
        line-height: 32px;
      }
    }
    &-exchange {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .has-exchange {
        font-weight: 400;
        font-size: 24px;
        color: #8b8b8b;
        line-height: 32px;
      }
      .exchange-btn {
        padding: 2px 20px;
        background: #fdd000;
        border-radius: 20px;

        font-weight: 400;
        font-size: 24px;
        color: #000000;
        line-height: 40px;
      }
    }
  }
}
</style>
